<template>
  <div>

      <div>
        <el-form>
          <el-row>
            <el-col :span="6">
              <el-form-item label="选择年份">
                <el-date-picker
                  v-model="selectYear"
                  value-format="yyyy"
                  format="yyyy"
                  type="year"
                  placeholder="选择年份"
                  @input="queryMonthSalary"
                >

                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="选择月份">
                <el-date-picker
                  v-model="selectMonth"
                  value-format="MM"
                  format="MM"
                  type="month"
                  placeholder="选择月份"
                  @input="queryMonthSalary"
                >

                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="4">
              <el-form-item >
                <el-button @click="InitEmployeeSalaryChange">员工薪资修改</el-button>
              </el-form-item>
            </el-col>
<!--            <el-col :span="3">-->
<!--              <el-form-item >-->
<!--                <el-button @click="ImportMonthSalaryExcel">导入薪资表</el-button>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="2">
              <el-form-item>
                <el-button @click="exportExcel">导出薪资表</el-button>
              </el-form-item>


            </el-col>
          </el-row>

        </el-form>
      </div>

    <el-dialog
      title="员 工 薪 资 修 改"
      :visible.sync="EmployeeSalaryChange"
      width="80%"
      :before-close="handleCloseInsert">
      <el-table
        :data="Emp"
        :row-style="{height: '0'}"
        :cell-style="{padding: '0'}"
        style="width: 100%"
        @row-click="getDetails"
        @selection-change="handleAttendanceChange"
      >






        <el-table-column align="center" prop="userId" label="员工Id" width="100" fixed></el-table-column>
        <el-table-column align="center" prop="username" label="姓名" width="120" fixed></el-table-column>
        <el-table-column align="center" prop="role" label="权限" width="120" fixed></el-table-column>
        <el-table-column align="center" prop="departmentId" label="部门Id" width="100" fixed></el-table-column>
        <el-table-column align="center" prop="departmentName" label="部门名" width="120" fixed></el-table-column>
        <el-table-column align="center" prop="workId" label="工号" width="75" fixed></el-table-column>
        <el-table-column align="center" prop="workName" label="职位" width="180" fixed></el-table-column>
        <el-table-column align="center" prop="baseSalary" label="基础薪资" width="100" fixed></el-table-column>
        <el-table-column fixed="right" width="200" label="操作">
          <template slot-scope="scope">
            <el-button @click="changeSalary(scope.row)" style="padding: 3px" size="mini" type="success">修改薪资</el-button>

            <!--            <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="danger">删除-->
            <!--            </el-button>-->
          </template>
        </el-table-column>
      </el-table>



    </el-dialog>
    <el-dialog
      title="修 改 薪 资"
      :visible.sync="changeSal"
      width="80%"
      :before-close="handleCloseInsert">
      <el-form>
      <el-row>
          <el-col :span="4">
              <el-form-item label="员工Id" >
                <el-input disabled="false" v-model="Emps.userId"></el-input>
              </el-form-item>

          </el-col>
        <el-col :span="4">

          <el-form-item label="员工姓名" >
            <el-input disabled="false" v-model="Emps.username"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="4">

          <el-form-item label="员工权限" >
            <el-input disabled="false" v-model="Emps.role"></el-input>
          </el-form-item>
        </el-col>



        <el-col :span="4">
          <el-form-item label="输入薪资：">
            <el-input v-model="Emps.baseSalary"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label=" ">
            <el-button @click="changeSalByuserId">修改</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label=" ">
            <el-button @click="changeSal = false">取消</el-button>
          </el-form-item>
        </el-col>
        </el-row>


      </el-form>

    </el-dialog>
<div>
  <el-table
    :data="Emp_salary"
    :row-style="{height: '0'}"
    :cell-style="{padding: '0'}"
    style="width: 100%"
    @row-click="getDetails"
    @selection-change="handleAttendanceChange"
    id="out-table"
  >

    <el-table-column align="center" prop="salaryOrder" label="薪资序列" width="100" fixed></el-table-column>

    <el-table-column align="center" prop="userId" label="员工Id" width="75" fixed></el-table-column>
    <el-table-column align="center" prop="username" label="姓名" width="75" fixed></el-table-column>
    <el-table-column align="center" prop="role" label="权限" width="75" fixed></el-table-column>
    <el-table-column align="center" prop="salaryMonth" label="年月" width="100" fixed></el-table-column>
    <el-table-column align="center" prop="baseSalary" label="基础工资" width="75"></el-table-column>
    <el-table-column align="center" prop="allAttendMoney" label="全勤奖励" width="75"></el-table-column>
    <el-table-column align="center" prop="runAttendanceMoney" label="早退罚金" width="75"></el-table-column>
    <el-table-column align="center" prop="restAttendanceMoney" label="请假罚金" width="75"></el-table-column>
    <el-table-column align="center" prop="lateAttendanceMoney" label="迟到罚金" width="75"></el-table-column>
    <el-table-column align="center" prop="absentAttendanceMoney" label="缺勤罚金" width="75"></el-table-column>
    <el-table-column align="center" prop="workMoney" label="加班费" width="75"></el-table-column>
    <el-table-column align="center" prop="transportSalary" label="车旅费" width="75"></el-table-column>
    <el-table-column align="center" prop="taxMoney" label="税金" width="75"></el-table-column>
    <el-table-column align="center" prop="onTimes" label="正常次数" width="75"></el-table-column>
    <el-table-column align="center" prop="runAttendanceTimes" label="早退次数" width="75"></el-table-column>
    <el-table-column align="center" prop="restAttendanceTimes" label="请假次数" width="75"></el-table-column>
    <el-table-column align="center" prop="lateAttendanceTimes" label="迟到次数" width="75"></el-table-column>
    <el-table-column align="center" prop="absentAttendanceTimes" label="缺勤次数" width="75"></el-table-column>
    <el-table-column align="center" prop="workTimes" label="加班时长" width="75"></el-table-column>
    <el-table-column align="center" prop="totalMoney" label="月总结算金额" width="75"></el-table-column>
    <el-table-column fixed="right" width="200" label="操作">
      <template slot-scope="scope">
        <el-button v-show="scope.row.checktype==0&&scope.row.attendtype=='上班'" @click="startworkAttendance(scope.row)" style="padding: 3px" size="mini" type="success">上班签到</el-button>
        <el-button v-show="scope.row.checktype==0&&scope.row.attendtype=='下班'" @click="startworkAttendance(scope.row)" style="padding: 3px" size="mini" type="success">下班签到</el-button>
        <el-button v-show="scope.row.checktype==0" @click="absentAttendance(scope.row)" style="padding: 3px;color: blueviolet" size="mini" type="success">请假</el-button>
        <el-button v-show="scope.row.checktype==4&&checkInTimeBound(scope.row.checkenddate)" @click="resetAttendance(scope.row)" style="padding: 3px;color: white" size="mini" type="warning">补签</el-button>
        <el-button v-show="scope.row.checktype==1&&scope.row.attendtype=='下班'" @click="workhardAttendance(scope.row)" style="padding: 3px;color: white" size="mini" type="primary">加班</el-button>


        <!--            <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="danger">删除-->
        <!--            </el-button>-->
      </template>
    </el-table-column>
  </el-table>
</div>








  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
    export default {
        name: "AdminSalaryManagement",
      data()
      {
        return{
          selectYear:new Date().getFullYear().toString(),
          selectMonth:(new Date().getMonth()+1).toString(),
          Emp_salary:[],
          Emp_salarys:{
            salaryOrder:"",
            userId:"",
            username:"",
            role:"",
            salaryMonth:"",
            baseMoney:"",
            allAttendMoney:"",
            runAttendanceMoney:"",
            restAttendanceMoney:"",
            lateAttendanceMoney:"",
            absentAttendanceMoney:"",
            workMoney:"",
            transportSalary:"",
            taxMoney:"",
            onTimes:"",
            runAttendanceTimes:"",
            restAttendanceTimes:"",
            lateAttendanceTimes:"",
            absentAttendanceTimes:"",
            WorkTimes:"",
            TotalMoney:""
          },
          EmployeeSalaryChange:false,
          Emp:[],
          Emps:{
            userId:"",
            username:"",
            role:"",
            departmentId:"",
            departmentName:"",
            workId:"",
            workName:"",
            baseSalary:""
          },
          changeSal:false,
        }
      },
      mounted() {
          this.reloadAllMonthSalary()
      },
      methods:{
        //定义导出Excel表格事件
        exportExcel() {
          let xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
          / generate workbook object from table /;
          /* 从表生成工作簿对象 */
          let table =  document.querySelector("#out-table").cloneNode(true)
          // 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
          table.removeChild(table.querySelector(".el-table__fixed-right"));
          table.removeChild(table.querySelector(".el-table__fixed"));
          let wb = XLSX.utils.table_to_book(
            table ,  //elementui 表格的id
            xlsxParam
          );

          /* 获取二进制字符串作为输出 */
          var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
          });
          try {
            FileSaver.saveAs(
              //Blob 对象表示一个不可变、原始数据的类文件对象。
              //Blob 表示的不一定是JavaScript原生格式的数据。
              //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
              //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
              new Blob([wbout], { type: "application/octet-stream" }),
              //设置导出文件名称
              JSON.stringify(this.selectYear).replace(/\"/g, "")+"-"
              +JSON.stringify(this.selectMonth).replace(/\"/g, "")+"月度薪资表.xlsx"
            );
          } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
          }
          return wbout;
        },
        reloadAllMonthSalary()
        {
          // alert(JSON.stringify(this.selectYear).replace(/\"/g, "")
          //   +JSON.stringify(this.selectMonth).replace(/\"/g, ""))
          if(this.selectMonth<10)
          {
          var checkmonth = JSON.stringify(this.selectYear).replace(/\"/g, "")+"-0"
              +JSON.stringify(this.selectMonth).replace(/\"/g, "")+"%"
           // alert(checkmonth)
          }
          else{
            var checkmonth = JSON.stringify(this.selectYear).replace(/\"/g, "")+"-"
              +JSON.stringify(this.selectMonth).replace(/\"/g, "")+"%"

          }
         //  alert(checkmonth)
          this.$axios.post("/Employee_Salary/SelectAllEmployeeSalaryBySalaryMonthDescBysalaryMonth",{
            salaryMonth:checkmonth
          }).then((res)=>{
            this.Emp_salary=[],
              this.Emp_salary = res.data

              // alert(JSON.stringify(res.data).replace(/\"/g, ""))
             return this.$message.success("加载成功！")
          })
        },
        queryMonthSalary()
        {
          // alert(JSON.stringify(this.selectYear).replace(/\"/g, "")
          //   +JSON.stringify(this.selectMonth).replace(/\"/g, ""))
            var checkmonth = JSON.stringify(this.selectYear).replace(/\"/g, "")+"-"
              +JSON.stringify(this.selectMonth).replace(/\"/g, "")+"%"

           // alert(checkmonth)
          this.$axios.post("/Employee_Salary/SelectAllEmployeeSalaryBySalaryMonthDescBysalaryMonth",{
            salaryMonth:checkmonth
          }).then((res)=>{
            this.Emp_salary=[],
              this.Emp_salary = res.data
             //alert(JSON.stringify(res.data).replace(/\"/g, ""))
            return this.$message.success("加载成功！")
          })
        },
        handleCloseInsert(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
             this.EmployeeSalaryChange = false


              done();
            })
            .catch(_ => {

            }).finally(
            ()=>{

            })
        },
        InitEmployeeSalaryChange()
        {
          var checkmonth = JSON.stringify(this.selectYear).replace(/\"/g, "")+"-0"
            +JSON.stringify(this.selectMonth).replace(/\"/g, "")
          this.Emp = []
          this.$axios.post("/Employee_Salary/SelectEmpUserIdAndUsername",{
            checkdate: checkmonth
          }).then((res)=>{
            this.Emp = res.data
            // alert(JSON.stringify(this.Emp))
            this.EmployeeSalaryChange = true;
          })
        },
        changeSalary(data)
        {
          this.Emps = data
          this.changeSal = true;
        },
        changeSalByuserId()
        {
          if(this.selectMonth<10)
          {
            var checkmonth = JSON.stringify(this.selectYear).replace(/\"/g, "")+"-0"
              +JSON.stringify(this.selectMonth).replace(/\"/g, "")

          }
          else{
            var checkmonth = JSON.stringify(this.selectYear).replace(/\"/g, "")+"-"
              +JSON.stringify(this.selectMonth).replace(/\"/g, "")

          }
          // alert(JSON.stringify(this.selectYear).replace(/\"/g, ""))
          // alert(JSON.stringify(this.selectMonth).replace(/\"/g, ""))
          // alert(JSON.stringify(this.selectYear).replace(/\"/g, "")+JSON.stringify(this.selectMonth).replace(/\"/g, ""))
          // alert(JSON.stringify(this.selectYear).replace(/\"/g, "")+"-"+JSON.stringify(this.selectMonth).replace(/\"/g, ""))
          // alert(JSON.stringify(checkmonth))

        alert(JSON.stringify(this.Emps))
          this.$axios.post("/Employee_Salary/UpdateEmpSalary",{
            userId:this.Emps.userId,
            username:this.Emps.username,
            baseSalary:this.Emps.baseSalary,
            salaryMonth:JSON.stringify(this.selectYear).replace(/\"/g, "")+"-"+JSON.stringify(this.selectMonth).replace(/\"/g, "")
          }).then((res)=>{
            this.changeSal = false
            this.InitEmployeeSalaryChange()

            this.selectYear = new Date().getFullYear().toString()
              this.selectMonth = (new Date().getMonth()+1).toString()
            if(this.selectMonth<10)
            var checkmonth = JSON.stringify(this.selectYear).replace(/\"/g, "")+"-0"
              +JSON.stringify(this.selectMonth).replace(/\"/g, "")+"%"
            else
              var checkmonth = JSON.stringify(this.selectYear).replace(/\"/g, "")+"-"
                +JSON.stringify(this.selectMonth).replace(/\"/g, "")+"%"
             //alert(checkmonth)
            this.$axios.post("/Employee_Salary/SelectAllEmployeeSalaryBySalaryMonthDescBysalaryMonth",{
              salaryMonth:checkmonth
            }).then((res)=> {
              this.Emp_salary = [],
                this.Emp_salary = res.data
             // alert(JSON.stringify(res.data).replace(/\"/g, ""))
            })
            this.reloadAllMonthSalary()
            return this.$message.success(res.data.msg)
          })
        }
      }
    }
</script>

<style scoped>

</style>
